<template>
  <div>
    <van-nav-bar
      title="订单页"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <van-contact-card
      type="add"
      @click="$router.push('/address')"
      add-text="添加地址"
      v-if="!defaultAddr.length"
    />
    <van-address-list
      :list="defaultAddr"
      default-tag-text="默认"
      style="height: auto"
      @click-item="$router.push('/address')"
      v-else
    />

    <div class="svg">
      <van-icon name="cross" size="100" color="#E3E5E8" />
      <p>暂无订单</p>
    </div>
    <van-submit-bar :price="0" button-text="提交订单" @submit="onSubmit" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { defaultAddress } from "../server/user";
let defaultAddr = ref([]);
function onSubmit() {
  console.log("提交订单");
}
onMounted(() => {
  defaultAddress(`${localStorage.getItem("userid")}`).then((res) => {
    defaultAddr.value = res.data;
    defaultAddr.value.forEach((item: any) => {
      item.address =
        item.province + item.city + item.county + item.addressDetail;
    });
  });
});
</script>

<style scoped>
.order {
  width: 100%;
  height: 100%;
  background: #f6f6f6;
}
.svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.svg > p {
  text-align: center;
  color: #969799;
  font-size: 20px;
  margin-top: 30px;
}
.van-contact-card {
  margin-top: 40px;
  padding: 16px;
}
:deep(.van-address-list__bottom) {
  display: none;
}
:deep(.van-radio__icon) {
  display: none;
}
</style>
